<!DOCTYPE html>
<html lang="en">
  <head>
    <%= require('./common/head.htm') %>
  </head>

<body>
  <%= require('./common/header.htm') %>

    <div id="Content">
      <div id="Welcome">
        <div id="WelcomeContent">
          Welcome to MyPetStore!
        </div>
      </div>

      <div id="Main">
        <div id="Sidebar">
          <div id="SidebarContent">
            <a href="/catalog/viewCategory?categoryId=FISH">
              <img src="<%= require('../images/common/fish_icon.gif') %>" />
            </a>
            <br/> Saltwater, Freshwater <br/>
            <a href="/catalog/viewCategory?categoryId=DOGS">
              <img src="<%= require('../images/common/dogs_icon.gif') %>" />
            </a>
            <br /> Various Breeds <br />
            <a href="/catalog/viewCategory?categoryId=CATS">
              <img src="<%= require('../images/common/cats_icon.gif') %>" />
            </a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="/catalog/viewCategory?categoryId=REPTILES">
              <img src="<%= require('../images/common/reptiles_icon.gif') %>" />
            </a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="/catalog/viewCategory?categoryId=BIRDS">
              <img src="<%= require('../images/common/birds_icon.gif') %>" />
            </a>
            <br /> Exotic Varieties
          </div>
        </div>

        <div id="MainImage">
          <div id="MainImageContent">
            <map name="estoremap">
              <area id="Birds1" alt="Birds" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect"/>
              <area id="Fish" alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory?categoryId=FISH" shape="rect" />
              <area id="Dogs" alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="rect" />
              <area id="Reptiles" alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES" shape="rect" />
              <area id="Cats" alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="rect" />
              <area id="Birds2" alt="Birds" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" />
            </map>
            <img height="355" src="<%= require('../images/common/splash.gif') %>" align="middle" usemap="#estoremap" width="350" />
          </div>
        </div>

        <div id="Separator">&nbsp;</div>
      </div>
  </div>

  <%= require('./common/footer.htm') %>
</body>
</html>